﻿import QtQuick 2.0
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.12
Rectangle {
    id: root
    anchors.fill: parent
    anchors.leftMargin: 20*dp
    anchors.rightMargin: 20*dp
    anchors.topMargin: 10*dp
    anchors.bottomMargin: 10*dp
    property bool visibleTitle: true

    property var listData: []
    function setData(data){
        listData = data
        for(let i = data.length-1; i >= 0; i --){
            if(data[i]["Status"]==="进行中"){
                listView.contentY = Math.max(0, Math.min((i-1)*40*dp, data.length*40*dp-listView.height)) + listView.originY
                break
            }
        }
    }

    // 标题
    Rectangle{
        height: 40*dp
        width: root.width
        visible: visibleTitle
        Text{
            text: "实验日志"
            font.bold: true
            font.pixelSize: config.fontsize + 5*dp
            anchors.verticalCenter: parent.verticalCenter
        }
    }

    // 表头
    Rectangle{
        y: 45*dp
        height: 40*dp
        width: root.width
        color: "#E6E6E6"
        Rectangle{              // 表格线
            color: "white"
            height: parent.height - 2
            width: parent.width
            y: 1; x: 0
        }
        Item{
            height: parent.height
            width: 160*dp
            Text{
                text: "时间"
                anchors.centerIn: parent
                color: "#888888"
                font.pixelSize: config.fontsize
            }
        }Item{
            height: parent.height
            width: (parent.width - 320*dp) / 2
            x: 160*dp
            Text{
                text: "步骤编号"
                anchors.centerIn: parent
                color: "#888888"
                font.pixelSize: config.fontsize
            }
        }Item{
            height: parent.height
            width: (parent.width - 320*dp) / 2
            x: 120*dp + (parent.width - 320*dp) / 2
            Text{
                text: "动作信息"
                anchors.centerIn: parent
                color: "#888888"
                font.pixelSize: config.fontsize
                wrapMode: Text.WordWrap
            }
        }
        Item{
            height: parent.height
            width: 120*dp
            x: parent.width - 240*dp
            Text{
                text: "用时(ms)"
                anchors.centerIn: parent
                color: "#888888"
                font.pixelSize: config.fontsize
            }
        }
        Item{
            height: parent.height
            width: 120*dp
            x: parent.width - 120*dp
            Text{
                text: "状态"
                anchors.centerIn: parent
                color: "#888888"
                font.pixelSize: config.fontsize
            }
        }
    }

    ListView{
        id:listView
        y: 85*dp
        height: root.height - 85*dp
        width: root.width
        model: listData.length
        delegate: logDelegate
        clip: true
        onContentYChanged: {
//            console.log("当前contentY", contentY,contentY+originY)
        }
    }
//    ListModel{
//        id: logModel
//        onDataChanged: {
//            console.log("model-DataChanged触发")
//        }onCountChanged: {
//            console.log("model-countChanged触发")
//        }
//    }
    Component{
        id: logDelegate
        Rectangle{
            height: 40*dp
            width: root.width
            Rectangle{
                height: 1
                width: root.width
                color: "#E6E6E6"
                y: parent.height - 1
            }
            Item{
                height: parent.height
                width: 160*dp
                Text{
                    text: listData[index]["FinishTime"]
                    anchors.centerIn: parent
                    font.pixelSize: config.fontsize
                }
            }
            Item{
                height: parent.height
                width: (parent.width - 320*dp) / 2
                x: 160*dp
                Text{
                    text: listData[index]["Step"]
                    anchors.centerIn: parent
                    font.pixelSize: config.fontsize
                }
            }
            Item{
                height: parent.height
                width: (parent.width - 320*dp) / 2
                x: 120*dp + (parent.width - 320*dp) / 2
                Text{
                    text: listData[index]["ActionInfo"]
                    anchors.centerIn: parent
                    font.pixelSize: config.fontsize
                }
            }
            Item{
                height: parent.height
                width: 120*dp
                x: parent.width - 240*dp
                Text{
                    text: listData[index]["Time"]
                    anchors.centerIn: parent
                    font.pixelSize: config.fontsize
                }
            }
            Item{
                height: parent.height
                width: 120*dp
                x: parent.width - 120*dp
                Rectangle{
                    height: 28*dp; width: 80*dp
                    anchors.centerIn: parent
                    radius: 15*dp
                    border.color: {
                        if(listData[index]["Status"] === "完成")      return  "#67C23A"
                        else if(listData[index]["Status"] === "异常") return  "#F56C6C"
                        else if(listData[index]["Status"] === "进行中") return  "#ECB311"
                        else                     return   "#999999"
                    }
                    color: {
                        if(listData[index]["Status"] === "完成")      return  "#F0F9EB"
                        else if(listData[index]["Status"] === "异常") return  "#FBEAEA"
                        else if(listData[index]["Status"] === "进行中") return  "#FDF3EB"
                        else                     return   "#F0F0F0"
                    }
                }

                Text{
                    text: listData[index]["Status"]
                    anchors.centerIn: parent
                    font.pixelSize: config.fontsize
                    color: {
                        if(text === "完成")         return "#67C23A"
                        else if(text === "异常")    return "#F56C6C"
                        else if(text === "进行中")    return "#ECB311"
                        else                       return "#999999"
                    }
                }
            }
        }
    }


}
